<template>
	<view class="idle-details-page" v-if="orderDetail">
		<bar-title bgColor="bg-white"
			:isBack="true"
			:isSolid="false"
		>
			<block slot="content">退货详情</block>
		</bar-title>
		
		
		<view class="order-top" >
			<view class="order-status-warp">
				<view class="status-info"  v-if="selectOrder.identity =='B'">
					<view class="info" v-if="orderDetail.refundStatus==2">卖家已同意退款退货申请</view>
					<view class="info" v-else-if="orderDetail.refundStatus==3">正在退款中</view>
					<view class="info" v-else-if="orderDetail.refundStatus==4">退款成功</view>
					<view class="info" v-else-if="orderDetail.refundStatus==5">卖家拒绝退款申请</view>
					<view class="info" v-else>请等待卖家处理</view>
					<view class="time" v-if="orderDetail.refundStatus!=4&&orderDetail.refundStatus!=5">还剩{{orderDetail.mandatoryRefundTime}}</view>
				</view>
				<view class="status-info"  v-if="selectOrder.identity =='S'">
					<view class="info" v-if="orderDetail.refundStatus==1">买家已申请退款</view>
					<view class="info" v-else-if="orderDetail.refundStatus==6">买家已申请退款退货，请处理</view>
					<view class="info" v-else-if="orderDetail.refundStatus==2">已受理买家退款退货申请</view>
					<view class="info" v-else-if="orderDetail.refundStatus==3">正在退款中</view>
					<view class="info" v-else-if="orderDetail.refundStatus==4">退款成功</view>
					<view class="info" v-else-if="orderDetail.refundStatus==5">您已拒绝退款</view>
					<view class="time" v-if="orderDetail.refundStatus!=4&&orderDetail.refundStatus!=5">还剩{{orderDetail.mandatoryRefundTime}}</view>
				</view>
				<view class="status-img" v-if="orderDetail.refundStatus==5">
					<image class="icon" src="/static/img/ic_order_fail.png" 
					mode="aspectFill"></image>
				</view>
				<view class="status-img" v-else-if="orderDetail.refundStatus==4">
					<image class="icon" src="/static/img/ic_order_success.png" 
					mode="aspectFill"></image>
				</view>
				<view class="status-img" v-else>
					<image class="icon" src="/static/img/ic_order_waitbg.png" 
					mode="aspectFill"></image>
				</view>
				
			</view>
			
		</view>
		
		<!-- 商品 -->
		<view class="goods-section" >
			<!-- 二手剧本 -->
			<view class="scen-group" v-if="selectOrder.productId">
				<view class="scen2  text-gray">
					<view class="scen-img">
						<image :src="selectOrder.productIcon" mode="aspectFill"></image>
					</view>
					<view class="scen-info">
						<view class="scen-info-title">
							<text class="title">{{selectOrder.scenName}}</text>
							<text  class='cu-tag bg-cyan round sm'>{{selectOrder.scenNum}}人本</text>
						</view>
						<view class="publisher">发行商:{{selectOrder.scriptPublisher}}</view>
						<view class="text-price">{{selectOrder.productDiscountPrice}}</view>
					</view>
					<view class="num"><text class="text-xs">x</text>1</view>
				</view>
			</view>
			
			<view class="tips-warp padding solid-bottom" v-if="orderDetail.refundStatus==1&&selectOrder.identity =='B'">
				<view class="title">您已成功发起退款申请，请耐心等待卖家处理。</view>
				<view class="text">
					卖家同意或者超时未处理，系统将退款给您。
				</view>
				<!-- <view class="text">
					如果卖家拒绝，您可以修改退款申请后再次发起，卖家会重新处理
				</view> -->
			</view>
			<view v-if="orderDetail.refundStatus==2 || orderDetail.refundStatus==6">
				<view class="tips-warp padding solid-bottom" v-if="selectOrder.identity =='S'">
					                    
					<view class="text">
						如未发货，请点击同意受理。
					</view>
					<view class="text">
						如实际已发货，请主动与买家联系，退货退款申请后去订单上操作发货。
					</view>
					<view class="text">
						逾期未响应，系统将自动退款给买家。
					</view>
				</view>
				
				<view class="address-min solid-bottom" v-if="selectOrder.identity =='B'">
					<view class="title-box">
						<view class="title">需寄回地址：</view>
						<button class="cu-btn line-gray sm"
							@tap="onCopy" :data-copy="1"
						>复制</button>
					</view>
					<view class="name margin-right-sm">收货人：{{orderDetail.postalName}} </view>
					<view class="mobile">电话：{{orderDetail.phone}}</view>
					<view class="address">地址：{{orderDetail.provinceName}}{{orderDetail.cityName}}{{orderDetail.areaName}}{{orderDetail.address}}</view>
				</view>
			</view>
			
			
		</view>
	
		<view class="cu-list menu" >
			<view class="cu-item">
				<view class="content">退款原因</view>
				<view class="action" >
					<text class="text-black">{{orderDetail.returnReason}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">退款金额</view>
				<view class="action" >
					<text class="text-red text-price">{{orderDetail.orderAmount}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">申请时间</view>
				<view class="action" >
					<text class="text-black">{{orderDetail.applyTime}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">退款编号</view>
				<view class="action" >
					<text class="text-black">{{orderDetail.returnsNumber}}</text>
				</view>
			</view>
			<view class="cu-item" v-if="orderDetail.courierCompany&&orderDetail.isReturnAddress==1">
				<view class="content">退货快递公司</view>
				<view class="action" >
					<text class="text-black">{{orderDetail.courierCompany}}</text>
				</view>
			</view>
			<view class="cu-item" v-if="orderDetail.courierNumber&&orderDetail.isReturnAddress==1">
				<view class="content">退货快递单号</view>
				<view class="action" >
					<text class="text-black">{{orderDetail.courierNumber}}</text>
				</view>
			</view>
			<view class="cu-item" v-if="orderDetail.refusedReason">
				<view class="content">拒绝退款原因</view>
				<view class="action" >
					<text class="text-black">{{orderDetail.refusedReason}}</text>
				</view>
			</view>
			
			
		</view>
		
		
		<view class="cu-modal" :class="modalName=='DialogDelivery'?'show':''">
			<view class="cu-dialog bg-white ">
				<view class="cu-bar bg-white justify-end">
					<view class="content text-bold text-black">填写单号</view>
				</view>
				<view class="padding-lr-xl padding-bottom">
					<view class="cu-btn block line-gray lg round margin-top">
					   <input class="uni-input"
							placeholder="请输入快递公司名称" 
							name="couriercompany"
							@blur="inputChange"
							confirm-type="next"
							data-key="couriercompany" 
					   />
					</view>
					<view class="cu-btn block line-gray lg round margin-top">
					   <input class="uni-input"
							placeholder="请输入快递单号" 
							name="courierNumber"
							@blur="inputChange"
							confirm-type="next"
							data-key="courierNumber"
					   />
					</view>
				</view>
				<view class="cu-bar bg-white justify-end solid-top">
					<view class="action">
						<button class="cu-btn line-cyan text-cyan" @tap="hideModal">取消</button>
						<button class="cu-btn bg-cyan margin-left" @tap="onDelivery">提交</button>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar solid-top foot bg-white justify-end">
			<view class="btn-group" 
				v-if="orderDetail.refundStatus != 3 && orderDetail.refundStatus != 4 && orderDetail.refundStatus != 5"
			>
				
				<view v-if="selectOrder.identity =='S'">
					<button class="line-cyan cu-btn round margin-xs"
						@click.stop="disagreeRefund"
					>拒绝退款</button>
					
					<button class="line-cyan cu-btn round margin-xs"
						v-if="orderDetail.refundType == 1"
						@click.stop="agreeRefund"
					>同意退款</button>
					
					<button class="line-cyan cu-btn round margin-xs"
						v-if="orderDetail.refundType == 2&& orderDetail.refundStatus == 6"
						@click.stop="acceptRefund"
					>同意受理</button>
					
					<button class="line-cyan cu-btn round margin-xs"
						v-if="orderDetail.refundType == 2 && orderDetail.refundStatus == 2"
						@click.stop="agreeRefund"
					>确认收货并退款</button>
				</view>
				
				<view  v-if="selectOrder.identity =='B'">
					<button class="line-cyan cu-btn round margin-xs"
						v-if="orderDetail.isReturnAddress!=1"
						@click.stop="cancelRefund"
					>撤销申请</button>
					
					<button class="bg-cyan cu-btn round margin-xs"
						v-if="orderDetail.refundStatus==2&&orderDetail.isReturnAddress==0"
						@click.stop="deliveryDialog"
					>填写单号</button>
				</view>
				
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
import { mapState } from "vuex";

import { Leisurely } from '@/models/leisurely.js';
export default {

	data() {
		return {
			modalName: '',
			orderDetail: null,
			courier: {}
		}
	},
	onLoad(option) {
		this.getReturnDetails()
		console.log(this.selectOrder);
	},
	computed: {
		...mapState(['selectOrder']),
	},
	methods: {
		BackPage() {
			this.$backPage()
		},
		hideModal(e) {
			this.modalName = null
		},
		inputChange(event) {
			const key = event.currentTarget.dataset.key;
			this.courier[key] = event.detail.value;
			console.log(this.courier);
		},
		deliveryDialog(){
			this.modalName = 'DialogDelivery'
		},
		onDelivery() {
			// 确认发货
			let checkRes = this.$graceChecker.check(this.courier,
				this.$formRuleConfig['courier'])
			if (!checkRes) {
				this.$mTool.showToast({
					title: this.$graceChecker.error,
					icon: 'none',
					mask: true
				})
				return
			}
			Leisurely.refundDelivery(
				this.orderDetail.orderId, 
				this.courier.couriercompany,
				this.courier.courierNumber
			).then(()=>{
				this.hideModal()
				this.$mTool.showToast({
					title: '发货成功',
					mask: true
				})
				this.getReturnDetails()
			})
			
		},
		async getReturnDetails() {
			let orderDetail = await Leisurely.returnDetails(this.selectOrder.returnsNumber)
			this.orderDetail = orderDetail
			
		},
		onCopy(e) {
			let copy = this.orderDetail.provinceName+this.orderDetail.cityName+this.orderDetail.areaName+this.orderDetail.address
			uni.setClipboardData({
				data: copy,
				success: function () {
					console.log('success');
				}
			})
		},
		
		acceptRefund() {
			this.$mTool.showModal({
				title: '提示',
				content: '是否要同意当前闲本的退款退货受理？',
				success: res => {
					if (res.confirm) {
						Leisurely.agreesRefund(this.selectOrder.returnsNumber).then(resolve => {
							this.getReturnDetails()
						})
					}
				}
			})
		},
		cancelRefund() {
			this.$mTool.showModal({
				title: '提示',
				content: '是否要撤销当前闲本的退款申请？',
				success: res => {
					if (res.confirm) {
						Leisurely.cancelRefund(this.selectOrder.returnsNumber).then(resolve => {
							this.$backPage()
						})
					}
				}
			})
		},
		disagreeRefund() {
			this.$mTool.showModal({
				title: '提示',
				content: '是否要拒绝当前闲本的退款？',
				success: res => {
					if (res.confirm) {
						this.$jumpPages('orderIdleRefund', {
							type: this.orderDetail.refundType,
							refuse: true
						})
					}
				}
			})
		},
		
		agreeRefund() {
			let paymentMethod = this.orderDetail.paymentMethod
			this.$mTool.showModal({
				title: '提示',
				content: '是否要同意当前闲本的退款？',
				success: res => {
					if (res.confirm) {
						if(paymentMethod==1) {
							this.$apis.RefundAliPay({
								orderId: this.selectOrder.orderId
							}).then(resolve => {
								this.getReturnDetails()
							})
						}
						if(paymentMethod==2||paymentMethod==3) {
							this.$apis.RefundWX({
								orderId: this.selectOrder.orderId
							}).then(resolve => {
								this.getReturnDetails()
							})
						}
					}
				}
			})
		}
	},
	
}
</script>

<style lang="scss" scoped>
.order-top{
	background-color: #2EB9C3;
	height: 260rpx;
	.order-status-warp{
		min-height: 260rpx;
		position: relative;
	}
	.status-info{
		color: #FFFFFF;
		padding-top: 84rpx;
		padding-left: 30rpx;
		line-height: 1;
		position: relative;
		z-index: 2;
		.info{
			font-size: 36rpx;
			font-weight: 700;
			margin-bottom: 30rpx;
		}
		.time{
			font-size: 28rpx;
		}
	}
	.status-img{
		position: absolute;
		top: 0;
		right: 30rpx;
		z-index: 1;
		.icon{
			width: 305rpx;
			height: 260rpx;
		}
	}
}
.address-min {
	padding:  30rpx;
	color: #909090;
	font-size: 24rpx;
	line-height: 2;
	.title-box{
		line-height: 1;
		color: #000000;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
	}
	.title{
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 20rpx;
		font-weight: 700;
	}
}
.goods-section {
	background: #fff;
	.tips-warp {
		font-size: 24rpx;
		color: #909090;
		line-height: 1;
		.title{
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 20rpx;
			font-weight: 700;
		}
		.text{
			line-height: 1.6;
		}
	}
	.scen-group{
		background: #F8FAFF;
		padding: 20rpx 30rpx;
	}
	.scen2{
		display: flex;
		position: relative;
		padding-bottom: 20rpx;
		
		.scen-img{
			width: 120rpx;
			height: 165rpx;
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			position: relative;
			background: #F5F5F5;
			border-radius: 10rpx;
			image{
				border-radius: 10rpx;
				width: 120rpx;
				height: 165rpx;
			}
		}
		.scen-info{
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 15px;
			font-size: 14px;
		}
		.scen-info-title{
			line-height: 20px;
			margin-bottom: 24rpx;
			.title{
				font-size: 36rpx;
				color: #000;
				font-weight: 700;
				margin-right: 27rpx;
			}
		}
		.publisher{
			margin-bottom: 30rpx;
			font-size: 24rpx;
		}
		.text-price{
			color: #E42C2C;
			font-size: 32rpx;
			font-weight: 700;
		}
	}
	
}
.foot{
	min-height: 0;
}
</style>
